<template>
  <div class="myDiv">
    <Header title="体检信息详情"></Header>
    <el-table
      :data="vesssel"
      v-loading="loading"
      border
      style="width: 100%"
      height="576"
      size="mini"
      ref="filterTable"
    >
      <el-table-column
        show-overflow-tooltip
        fixed
        prop="title"
        align="center"
        width="120"
        label="疾病名称"
      ></el-table-column>
      <el-table-column show-overflow-tooltip prop="valueD" width="70" align="center" label="D值"></el-table-column>
      <el-table-column show-overflow-tooltip prop="valueE" width="70" align="center" label="E值"></el-table-column>
      <el-table-column show-overflow-tooltip prop="valueEx" width="70" align="center" label="EX值"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" width="70" label="历史疾病">
        <template slot-scope="scope">{{scope.row.valueBf=='1'?'有':'无'}}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" width="100" label="等级预估">
        :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
        <template
          slot-scope="scope"
        >
          <el-tag
            :color="judgmentLevel(scope.row.valueD).color"
            disable-transitions
          >{{judgmentLevel(scope.row.valueD).statetext}}</el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column
        show-overflow-tooltip
        prop="modificationTime"
        width="150"
        align="center"
        label="体检时间"
      ></el-table-column>-->
    </el-table>
    <Page :total="total" @pagenum="pagenum"></Page>
  </div>
</template>

<script>
import Header from "@/components/header";
import Page from "@/components/pagination";

export default {
  components: { Header, Page },
  props: {},
  data() {
    return {
      page: 1,
      rows: 12,
      total: 0,
      tableData: [], //全部数据
      vesssel: [], //页面临时数据
      models: [], //检查类型
      loading: true
    };
  },
  watch: {
    page: function() {
      if (this.page == 1) {
        this.vesssel = this.tableData.slice(0, this.rows);
      } else if (this.page == Math.ceil(this.tableData.length / 12)) {
        this.vesssel = this.tableData.slice((this.page - 1) * this.rows);
      } else {
        this.vesssel = this.tableData.slice(
          (this.page - 1) * this.rows,
          this.rows * this.page
        );
      }
    }
  },
  computed: {},
  methods: {
    pagenum(data) {
      this.page = data[0];
      this.rows = 12;
    },
    judgmentLevel(value) {
      value = parseFloat(value);
      var str = ""; // 百分比
      var state = ""; // 结果
      var color = ""; // 色值
      var statetext = ""; // 色值 // 将小数点装换成百分比
      str = parseFloat((value * 100).toPrecision(12));
      if (value >= 0 && value <= 0.1) {
        state = 4; // 四级
        color = "#f56c6c";
        statetext = "就医咨询";
      } else if (value > 0.1 && value <= 0.425) {
        state = 3; // 三级
        color = "#e6a23c";
        statetext = "亚健康";
      } else if (value > 0.425 && value <= 0.725) {
        state = 2; // 二级
        color = "#67c23a";
        statetext = "概率很高";
      } else if (value > 0.725 && value <= 1) {
        state = 1; // 一级
        color = "#21a675";
        statetext = "潜在风险";
      } else if (value > 1) {
        str = 100;
        state = 0; // 正常
        color = "#409EFF";
        statetext = "正常";
      }
      let obj = {
        state,
        color,
        statetext,
        str
      };
      return obj;
    }
  },
  created() {
    // 获取设备订单检查类型
    // this.$http(this.api.DictionaryModels, {
    //   catCode: "DetectionSetMeal"
    // }).then(res => {
    //   this.models = res.data.pageData.data;
    // });
    this.total = this.$route.query.obj.length;
    this.tableData = this.$route.query.obj;
    this.loading = false;
    this.vesssel = this.tableData.slice(0, this.rows);
  },
  mounted() {}
};
</script>
<style scoped>
/deep/.el-tag {
  color: #fff;
  border-radius: 15px;
  border-color: unset;
}
</style>